<template>
  <div class="about">
    <h1>watch Effect</h1>
    <p>{{list[0]}}</p>
    <input type="text" v-model="list[0]">
    <h1>watch</h1>
    <button @click="stop()">停止</button>
    <h1>computed计算</h1>
    <p>{{fee}}</p>
    <h1>ref <button @click="num++">{{num}}</button></h1>
    <h1>reactive</h1>
    <div v-for="item in list" :key="item">
      {{item}} 
      <button @click="delItem(item)">x</button>
    </div>
  </div>
</template>
<script setup>
// ref 创建响应式数据的方法（值类型）
// reactive 值类型响应式对象
// computed 计算(从现有数据计算新的数据)
// watch 监听数据变化
// watch 监听副作用 （只要在watchEffect调用的函数都讲会被监听）
import {ref,reactive,computed,watch,watchEffect} from 'vue'
const num = ref(8);
// stop停止监听的方法
// nval，oval形参，nval最新的值newValue oval之前的值OldValue
const stop = watch(num,(nval,oval)=>{
  console.log("数据变化",nval,oval)
})
// 20%的佣金
const fee = computed(()=>num.value*0.2);


// 列表
const list = reactive(["vue",'react','angular'])
// 删除列表中的值
watchEffect(()=>{
  // 只要在watchEffect中引用的值，那么该回调函数都会执行
  console.log("num变了",num.value);
  console.log("list发生变化",list[0])
})


function delItem(item){
  // 查找到下标
  // findIndex回调函数如果返回的是true
  // findIndex返回当前value对应下标（索引）  
  var ind = list.findIndex(value=>value==item);
  // 删除
  list.splice(ind,1);
}
</script>
